import { Table, Breadcrumb, Spin, Typography } from 'antd';
import  css from'./Good.module.css';
import { useEffect, useState } from 'react';
import axios from 'axios'; 
import moment from 'moment'; 

function Invoice() {
  const [loading, setLoading] = useState(false);
  const [invoiceData, setInvoiceData] = useState([]);

 // 表格列配置
 const columns = [
    {
      title: '商品名称',
      dataIndex: 'productName',
      key: 'productName',
    },
    {
      title: '单价',
      dataIndex: 'price',
      key: 'price',
      render: (value) => `¥${value.toFixed(2)}`,
    },
    {
      title: '数量',
      dataIndex: 'num',
      key: 'num',
    },
    {
      title: '金额',
      key: 'amount',
      render: (_, record) => `¥${(record.price * record.num).toFixed(2)}`,
    },
  ];

  // 从后端获取数据
  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const response = await axios.get('http://localhost:3000/Invoice');
        console.log('接口响应数据:', response.data); // 添加调试日志
        setInvoiceData(response.data.data); // 修正状态更新
      } catch (error) {
        console.error("数据加载失败:", error);
        message.error('数据加载失败，请检查控制台');
      } finally {
        setLoading(false);
      }
    };
    fetchData();
  }, []);

 // 计算汇总数据
 const calculateTotals = () => {
    const subtotal = invoiceData.reduce((sum, item) => sum + (item.price * item.num), 0);
    const tax = subtotal * 0.13;
    const discount = subtotal * 0.1;
    const total = subtotal + tax - discount;

    return {
      subtotal: subtotal.toFixed(2),
      tax: tax.toFixed(2),
      discount: discount.toFixed(2),
      total: total.toFixed(2)
    };
  };

  const totals = calculateTotals();

  // 汇总区块样式
  const summaryStyle = {
    marginTop: 20,
    marginLeft: 'auto',
    width: 300,
    padding: '16px',
    backgroundColor: '#fafafa',
    borderRadius: '4px'
  };

  const summaryItemStyle = {
    display: 'flex',
    justifyContent: 'space-between',
    margin: '8px 0',
    fontSize: 14
  };

  return (
    <div className={css.container} style={{ height: '100%', display: 'flex', flexDirection: 'column' }}>
      {/* 头部 */}
      <div className={css.header}>
        <h1 className={css.maintitle}>发票</h1>
        <Breadcrumb
          className={css.breadcrumb}
          items={[
            { title: '电子商务' },
            { title: '发票' }
          ]}
        />
      </div>
       {/* 数据表格 */}
      <Spin spinning={loading}>
        <Table
          columns={columns}
          dataSource={invoiceData}
          bordered
          rowKey="productCode"
          pagination={{ pageSize: 10 }}
          locale={{
            emptyText: loading ? '数据加载中...' : '暂无发票数据'
          }}
        />

        {/* 汇总区块 */}
        <div style={summaryStyle}>
          <div style={summaryItemStyle}>
            <Typography.Text>小计：</Typography.Text>
            <Typography.Text>¥{totals.subtotal}</Typography.Text>
          </div>
          <div style={summaryItemStyle}>
            <Typography.Text>税费(13%)：</Typography.Text>
            <Typography.Text>¥{totals.tax}</Typography.Text>
          </div>
          <div style={summaryItemStyle}>
            <Typography.Text>优惠：</Typography.Text>
            <Typography.Text>10%</Typography.Text>
          </div>
          <div style={{ ...summaryItemStyle, fontSize: 16, marginTop: 16 }}>
            <Typography.Text strong>总额：</Typography.Text>
            <Typography.Text strong>¥{totals.total}</Typography.Text>
          </div>
        </div>
      </Spin>
      
    </div>
  )
}

export default Invoice;